<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: shuangchenyue
  Date: 2021/6/7
  Time: 9:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <head>
        <meta charset="UTF-8">
        <title>商城购物</title>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/onlineshop/css/style.css">
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/onlineshop/css/tubiao.css">
        <style type="text/css">
            .warp{
                width:1226px;
                height:460px;

                position: relative;
            }
            .list{
                width:1226px;
                height:460px;;
                list-style: none;
                position: relative;
                padding-left: 0px;
            }
            .item{
                position: absolute;
                width: 100%;
                height: 100%;
                color: white;
                font-size: 50px;
                opacity: 0;
                transition: all .8s;
            }
            .item:nth-child(1)
            {
                background-color: black;
            }
            .item:nth-child(2)
            {
                background-color: yellow;
            }
            .item:nth-child(3)
            {
                background-color: blue;
            }
            .btn{
                width:50px;
                height: 100px;
                position: absolute;
                top: 150px;
                z-index:100;
                background-color: rgba(255,255,255,0.3);
                border: none;
            }

            .btnp{
                color: rgba(102, 78, 78, 0.6);
                font-size: 40px;
            }
            #goPre{
                left: 0px;
            }
            #goNext{
                right: 0px;
            }

            .item.active{
                z-index: 10;
                opacity: 1;
            }

            .pointList{
                padding-left: 0px;
                list-style: none;
                position: absolute;
                right: 20px;
                bottom: 20px;
                z-index: 1000;
            }
            .point{
                width: 8px;
                height: 8px;
                background-color: rgba(0,0,0,0.4);
                border-radius: 100%;
                float: left;
                margin-right: 14px;
                border: solid;
                border-width: 2px;
                border-color: rgba(255,255,255,0.6);

                cursor: pointer;
            }

            .point.active{
                background-color: rgba(255,255,255,0.8);

            }
        </style>
    </head>
</head>
<body>
<header>
    <div class="top center"style="text-align: center">
        <div class="right fr">
            <div class="gouwuche fr"><a href="">购物车</a></div>
            <div class="fr">
                <ul>
                    <li><a href="${pageContext.request.contextPath}/login.jsp" target="_blank">登录</a></li>
                    <li>|</li>
                    <li><a href="${pageContext.request.contextPath}/mvc/toRegister.do" target="_blank" >注册</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</header>

<!-- start banner_x -->
<div class="banner_x center">
    <a href="index.jsp" target="_blank"><div class="logo fl"></div></a>
    <div class="nav fl" style="margin-left: 200px">
        <div class="clear">  </div>
        <div class="clear">  </div>
        <ul>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=1" target="_blank">枪炮</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=2">刀具</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=3">载具</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=4">飞行器</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=5">舰艇</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=6">导弹</a></li>
            <li><a href="${pageContext.request.contextPath}/mvc/showProductByCategoryId.do?id=7">其他</a></li>
        </ul>
    </div>
    <div class="search fr">
        <form action="${pageContext.request.contextPath}/mvc/showProductBySearch.do" method="post">
            <div class="text fl">
                <input type="text" class="shuru"  placeholder="Glock-17&nbsp;QBZ191现货" style="text-align: center" name="name">
            </div>
            <div class="submit fl">
                <input type="submit" class="sousuo" value="搜索"/>
            </div>
            <div class="clear"></div>
        </form>
        <div class="clear"></div>
    </div>
</div>
<!-- end banner_x -->

<div class="danpin center">

    <c:choose>
        <c:when test="${requestScope.productListByCategoryId.size()>0}">
            <div class="biaoti center">${requestScope.productListByCategoryId.get(1).category.name}</div>
        </c:when>

        <c:otherwise>
            <div class="biaoti center">${requestScope.category.name}</div>

        </c:otherwise>
    </c:choose>






    <div class="main center">
        <c:choose>
            <c:when test="${requestScope.productListByCategoryId.size()>0}">
                <c:forEach items="${requestScope.productListByCategoryId}" var="product">
                    <div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
                        <div class="sub_mingxing"><a href="${pageContext.request.contextPath}/mvc/showProductDetail.do?id=${product.id}" target="_blank"><img src="${pageContext.request.contextPath}/${product.images}" alt=""></a></div>
                        <div class="pinpai"><a href="${pageContext.request.contextPath}/mvc/showProductDetail.do?id=${product.id}" target="_blank">${product.name}</a></div>
                        <div class="youhui">${product.company}</div>
                        <div class="jiage">$ ${product.baseprice}</div>
                    </div>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <div style="text-align: center;margin-top: 70px">
                    <img src="${pageContext.request.contextPath}/image/nomessage.png" width="170px" height="150px">

                    <h1>该分类暂无商品</h1>
                </div>
            </c:otherwise>
        </c:choose>
    </div>
</div>

</body>
</html>
